<script lang="ts" setup>
import { useRouter } from 'vue-router'
import footerCom from './components/footerCom.vue'
const router = useRouter()
// router.push('/home')

/*
  webApp: 运行在网页中 h5 端

  移动App: 需要在应用商店下载，安装在手机上的软件

*/


/*
  router: 用来做页面的跳转用的    
  route: 用来获取路由信息用的
*/


</script>
<template>
  <div class="container">

    <!-- <RouterView /> -->

    <router-view v-slot="{ Component }">
      <transition name="fade">
        <keep-alive include="Home">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>

    <!-- 命名视图，路由的第二个出口 -->
    <router-view name="footer"></router-view>

    <!-- 横屏提示 -->
    <div class="tip">亲请不要将屏幕横向使用哦</div>

  </div>
</template>
<style lang="scss">
* {
  /* 禁止用户选中页面内容 */
  user-select: none;
}

html,
body,
#app,
.container {
  height: 100%;
}

html {
  box-sizing: border-box;
  border: 1px solid #ccc;
  /* 
    目前百分之 90 以上的 UI 设计师使用的是 iPhone 6,7,8 的尺寸进行设计项目
    如果设计稿是 iPhone 6,7,8 为基础的设计图，那么我们应该
    这样去计算 ：100 / 375 * 100 = 26.66666666666vw
    如果设计稿是 iPhone 12Pro ,那么我们的计算方式： 100 / 390 * 100 = 25.641vw
    如果设计稿是 iPhone 4 ,那么我们的计算方式： 100 / 320 * 100 = 31.25vw
  */
  font-size: 26.666666666666vw;
}

body {
  /* 具体要根据公司设计稿来决定这里应该写多少，这里的值是设计稿中出现次数最多的字号 */
  font-size: 12px;
}

.container {

  display: flex;
  flex-direction: column;

  .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .header {
      height: 0.44rem;
      background-color: #f66;
      color: white;
      line-height: .44rem;
      text-align: center;
    }

    .content {
      overflow: auto;
      /* 添加 css 平滑滚动 */
      scroll-behavior: smooth;
    }
  }

  .footer {
    height: 0.5rem;
    border-top: 1px solid #ccc;
    display: flex;

    a {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      text-decoration: none;
      color: #000;

      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);


      span {
        padding-top: 5px;
        box-sizing: border-box;
      }

      p {
        position: relative;
        bottom: 5px;
      }
    }

    .router-link-active {
      color: #f66;
    }
  }
}


/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.fade-enter-active {
  transition: all 0.3s;
  opacity: 0;
  transform: translateX(100%);

}

.fade-enter-to {
  transform: translateX(0);
  opacity: 1;
}


.tip {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  color: white;
  text-align: center;

  /* display: flex; */
  display: none;

  justify-content: center;
  align-items: center;
}

/* 
orientation: landscape 监听屏幕是 横屏
orientation: portrait 监听屏幕是 竖屏
*/
@media all and (orientation: landscape) {
  .tip {
    display: flex;
  }
}
</style>